<template>
    <div>
        展示分类
        <table>
            <tr>
                <td>名称</td>
            </tr>
            <tr v-for="i in ylist">
                <td>
                    <van-button @click="changetype_id(i.id)" :class="i.id==type_id?'active':''">{{i.name}}</van-button>
                </td>
            </tr>
        </table>
        <br>
        展示商品
        <table>
            <tr>
                <td>开始时间</td>
                <td>结束时间</td>
                <td>余额</td>
                <td>操作<td/>
            </tr>
            <tr v-for="i in rlist">
                <td>{{i.stime}}</td>
                <td>{{i.endtime}}</td>
                <td>{{i.money}}</td>
                <td>
                    <!-- <router-link>详情</router-link> -->
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                ylist:[],
                rlist:[],
                type_id:0
            }
        },
        methods:{
            //获取分类表所有信息
            get_ylist(){
                this.$axios.get('pic/ypM')
                .then(res=>{
                    this.ylist=res.data.list
                })
            },
            //更新city_id 刷新商品表
            changetype_id(id){
                this.type_id=id
                this.get_rlist()
            },
            //获取商品表所有信息
             get_rlist(){
                this.$axios.get('pic/reM?type_id='+this.type_id)
                .then(res=>{
                    alert(this.type_id)
                    this.rlist=res.data.list
                })
            },
        },
        mounted(){
            this.get_ylist()
            this.get_rlist()
        }
    }
</script>

<style scoped>
.active{
    background-color:plum;
}
</style>